<template>
  <div class="header">
    <div class="header_am_pm">
      <div class="am">上午</div>
      <div class="pm">下午</div>
    </div>
    <div class="header_hour">
      <div class="hour" v-for="i in 24" :key="i">
        {{ `${i - 1}:00` }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  hourWidth: {
    type: Number,
    default: 60,
  },
  hourHeight: {
    type: Number,
    default: 25,
  },
});

const _hourWidth = computed(() => {
  return props.hourWidth + "px";
});

const _hourHeight = computed(() => {
  return props.hourHeight + "px";
});

const pmAmWidth = computed(() => {
  return props.hourWidth * 12 + "px";
});
</script>

<style lang="scss" scoped>
.header_am_pm {
  display: flex;
  box-sizing: border-box;
  width: calc(v-bind(pmAmWidth) * 2);
  border: 1px solid #ccc;
  .am,
  .pm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: v-bind(pmAmWidth);
    height: v-bind(_hourHeight);
    border-right: none;
    background-color: #f0f0f0;
    box-sizing: border-box;
  }
  .am {
    border-right: 1px solid #ccc;
  }
}
.header_hour {
  display: flex;
  width: calc(v-bind(pmAmWidth) * 2);
  .hour {
    display: flex;
    justify-content: center;
    align-items: center;
    width: v-bind(_hourWidth);
    height: v-bind(_hourHeight);
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
  }
  .hour:first-child {
    border-left: 1px solid #ccc;
  }
}
</style>
